<?php

use Sc\Util\HtmlElement\El;
use Sc\Util\HtmlStructure\Form\FormItem;
use Sc\Util\HtmlStructure\Html\Html;
use Sc\Util\HtmlStructure\Html\Js\JsCode;
use Sc\Util\HtmlStructure\Html\Js\JsFor;
use Sc\Util\HtmlStructure\Html\Js\JsFunc;
use Sc\Util\HtmlStructure\Html\Js\JsIf;
use Sc\Util\HtmlStructure\Html\Js\JsVar;

/** @var \Sc\Util\HtmlStructure\Html\Js\Vue $vue */

Html::css()->addCss(<<<CSS
#filter{
    margin: 10px 0;
}
CSS);

$a = FormItem::select('showVersion')
    ->setVAttrs('style', 'margin-left: 10px;')
    ->setOptionsVarName('ApiInfo.versionSelect')
    ->render();

$el = El::double('div')->setId("filter")->append(
    El::double('el-button-group')->addClass('ml-4')->append(
        El::double('el-button')
            ->setAttr('type', 'primary')
            ->setAttr(':plain', 'showStar != null')
            ->setAttr('@click', 'showStar = null')->text('全部'),
        El::double('el-button')
            ->setAttr('type', 'primary')
            ->setAttr(':plain', 'showStar != 1')
            ->setAttr('@click', 'showStar = 1')->text('已标记'),
        El::double('el-button')
            ->setAttr('type', 'primary')
            ->setAttr(':plain', 'showStar != 0')
            ->setAttr('@click', 'showStar = 0')->text('未标记'),
    ),
    FormItem::text('searchText')->placeholder("搜索：地址|标题")
        ->setVAttrs('style', 'width: 300px;margin-left: 10px;')
        ->render()->find('el-input'),
    FormItem::select('showVersion')
        ->setVAttrs('style', 'margin-left: 10px;width:180px')
        ->setOptionsVarName('ApiInfo.versionSelect')
        ->render()->find('el-select')
);

$vue->addMethod("show", JsFunc::anonymous(['api', 'group'])->code(
    JsVar::def('show', true),
    JsIf::when('api.children && api.children.length > 0')->then(
        JsCode::raw('return this.showGroup(api);')
    ),
    JsIf::when('this.showStar === 1 && !this.Stars.hasOwnProperty(api.url)')->then(
        JsVar::set('show', false),
    )->elseIf('this.showStar === 0 && this.Stars.hasOwnProperty(api.url)')->then(
        JsVar::set('show', false),
    ),
    JsIf::when('this.searchText && group.name.indexOf(this.searchText) === -1 && api.url?.indexOf(this.searchText) === -1 && api.name.indexOf(this.searchText) === -1')->then(
        JsVar::set('show', false),
    ),
    JsIf::when('!api.version.includes(this.showVersion)')->then(
        JsVar::set('show', false),
    ),

    JsCode::raw('return show;')
));

$vue->addMethod('showGroup', JsFunc::anonymous(['group'])->code(
    JsVar::def('show', true),
    JsIf::when('this.showStar === 1 && group.children.filter((api) => this.Stars.hasOwnProperty(api.url)).length <= 0')->then(
        JsVar::set('show', false),
    )->elseIf('this.showStar === 0 && group.children.filter((api) => !this.Stars.hasOwnProperty(api.url)).length <= 0')->then(
        JsVar::set('show', false),
    ),
    JsIf::when('this.searchText && group.name.indexOf(this.searchText) === -1 && group.children.filter((api) => api.url.indexOf(this.searchText) >= 0 || api.name.indexOf(this.searchText) >= 0).length <= 0')->then(
        JsVar::set('show', false),
    ),
    JsIf::when('!group.version.includes(this.showVersion)')->then(
        JsVar::set('show', false),
    ),
    JsCode::raw('return show;')
));


return $el;